import { throttle } from '@csii/vx-util';
import loadModule from '../../utils/loadModule';

export default {
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    data: function() {
      this.$nextTick(() => {
        this.proxyRender();
      });
    },
  },
  async mounted() {
    await this.proxyRender();
    // resize support
    this.resizeChart = throttle(() => this.chart.resize(), 500);
    window.addEventListener('resize', this.resizeChart);
  },
  methods: {
    async proxyRender() {
      await loadModule.loadEcharts();
      const options = this.setupOptions();
      this.chart = window.echarts.init(options.el);
      this.chart.setOption(options.baseOptions);
    },
    setupOptions() {
      throw Error('un implement method! please implement in child component!');
    },
  },
  destroyed() {
    // remove event listener
    window.removeEventListener('resize', this.resizeChart);
    this.chart && this.chart.dispose();
  },
};
